<template>
  <div class="Tfooters">
    <div class="Tf1">
      <p>共{{ $store.state.common.totalNums }}条记录，当前第 {{ num }}/{{ $store.state.common.totalPages }} 页</p>
      <el-row>
        <el-button type="primary" :class="[firstclass]" @click='first'>首页</el-button>
        <el-button type="primary" :class="[secondclass]" @click="pre">上一页</el-button>
        <el-button type="primary" :class="[thirdclass]" @click="next">下一页</el-button>
        <el-button type="primary" :class="[fourthclass]" @click='last'>尾页</el-button>
      </el-row>
      <select name="" class="selects">
        <option value="">10条/页</option>
      </select>
      <span>跳至</span>
      <input v-model="input" placeholder="1" />
      <span>页</span>
      <el-row>
        <el-button type="primary" class="actives" @click="goPage">GO</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
    props: ["uurl"],
  // data选项必须要求是一个函数，函数必须返回一个普通的对象
  data: function () {
    return {
      num: 1,
      goodscategorys: [],
      viewcategorys: [],
      firstclass: "actives",
      secondclass: "unableclick",
      thirdclass: "ableclick",
      fourthclass: "ableclick",
      input: "",
    };
  },
  created() {
    this.$http
      .get(
        this.uurl
      )
      .then((ret) => {
      });
  },
  methods:{
    next(){
      if(this.num<this.$store.state.common.totalPages){
        this.num++
        this.$store.commit("common/setNowPage",this.num);
      }
    },
    pre(){
      if(this.num>1){
        this.num--
        this.$store.commit("common/setNowPage",this.num);
      }
    },
    last(){
      this.num =this.$store.state.common.totalPages
      this.$store.commit("common/setNowPage",this.num);
    },
    first(){
      this.num =1
      this.$store.commit("common/setNowPage",this.num);
    },
    goPage(){
      if(this.input<=this.$store.state.common.totalPages && this.input>0){
        this.num =this.input
        this.$store.commit("common/setNowPage",this.num);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/goodsfooter.scss";
</style>
